<template>
    <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="高血压" name="first">
        <div class="demo-date-picker">
          <!-- 搜索表单 -->
          <el-form label-width="auto" style="max-width: 100%">
              <el-row>
                  <el-col :span="5">
              <el-form-item label=" 姓名:">
                  <el-input
                    v-model="queryDto.name"
                    placeholder="姓名"
                  ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="8">
              <el-form-item label="身份证号:" style="margin-left: 20px;margin-right: 20px">
                      <el-input
                      v-model="queryDto.idNumber"
                    placeholder="身份证号"
                      ></el-input>
                  </el-form-item>
                  </el-col>
                  <el-col :span="10">
              <el-form-item label="建档时间:">
        <el-date-picker
          v-model="createTimes"
          type="daterange"
          unlink-panels
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
          :size="size"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
              </el-form-item>
                  </el-col>
              </el-row>
              
      <el-row style="display:flex">
          <el-button type="primary" size="small" @click="searchSysRole">
              搜索
          </el-button>
          <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
  </el-form>
          <!-- 添加按钮 -->
          <div class="tools-div">
              <el-button type="success" size="small" @click="addShow()">添 加</el-button>
          </div>
          <el-dialog v-model="dialogVisible" :title="tit" width="70%">
          <el-form label-width="120px">
              <el-row :gutter="40">
                  <el-col :span="6">
              <el-form-item label="姓名:">
                  <el-input v-model="patient.name"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="身份证号:">
                  <el-input  v-model="patient.idNumber"/>
              </el-form-item>
          </el-col>
              <el-col :span="6">
              <el-form-item label="联系方式:">
                  <el-input v-model="patient.phone"/>
              </el-form-item>
          </el-col>
              <el-col :span="6">
                  <el-form-item label="性别:">
                  <el-radio-group v-model="patient.sex">
                      <el-radio :label="1">男</el-radio>
                      <el-radio :label="2">女</el-radio>
                  </el-radio-group>
              </el-form-item>
          </el-col>
          </el-row>
          <el-row :gutter="20">
              <el-col :span="6">
                  <el-form-item label="年龄:">
                      <el-input v-model="patient.age"/>
                  </el-form-item>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="民族:">
                      <el-input v-model="patient.nationId"/>
                  </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="婚姻状况:">
                <el-select v-model="patient.maritalId" placeholder="婚姻状况">
                    <el-option
                        v-for="item in maritalIdList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="省:">
                <el-select v-model="sheng" @change="shengxuan" placeholder="省">
                    <el-option
                        v-for="item in optionsheng"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="市:">
                <el-select v-model="shi" label="市:" placeholder="市" @change="shixuan" v-bind:disabled="shid">
                    <el-option
                        v-for="item in optionshi"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="县:">
                <el-select v-model="xian" label="县:" @change="xianxuan" placeholder="县" v-bind:disabled="xiand">
                    <el-option
                        v-for="item in optionxian"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="文化程度:">
                      <el-input  v-model="patient.standardId"/>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row :gutter="20">
              <el-col :span="6">
                  <el-form-item label="职业:">
                      <el-input  v-model="patient.occupationId"/>
                  </el-form-item>
              </el-col>
              <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
              <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
              <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
          </el-row>
          <el-form-item label="家庭地址:">
                  <el-input v-model="patient.address"/>
              </el-form-item>
              <el-form-item label="标签:">
                  <el-input  v-model="patient.tag"/>
              </el-form-item>
              <el-form-item label="头像">
                <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8501/sys/patient/fileUpload"
                            :show-file-list="show"
                            :on-success="handleAvatarSuccess"
                            :headers="headers"
                    >
                    <img v-if="patient.img" :src="patient.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
              <el-form-item label="医师:">
                  <el-input  v-model="patient.physician"/>
              </el-form-item>
              <el-form-item label="健康管理师:">
                  <el-input  v-model="patient.thmanager"/>
              </el-form-item>
              <el-form-item label="档案来源:">
                  <el-input  v-model="patient.archivalSource"/>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="addpatient()">提交</el-button>
                  <el-button @click="dialogVisible = false">取消</el-button>
              </el-form-item>
          </el-form>
      </el-dialog> 
          
          <!--- 角色表格数据 -->
          <el-table :data="list" style="width: 100%" >
            <el-table-column prop="id" label="序号" width="60" />
            <!-- <el-table-column type="index" label="序号" width="100"></el-table-column> -->
              <el-table-column prop="name" label="姓名" width="60" />
              
              <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
                  {{ scope.row.sex == 1 ? '男' : '女' }}
              </el-table-column>
              <el-table-column prop="img" label="头像"  #default="scope">
                <img :src="scope.row.img" width="50" />
            </el-table-column>
              <el-table-column prop="phone" label="联系方式"/>
              <el-table-column prop="address" label="家庭地址" />
              <el-table-column prop="idNumber" label="身份证号" />
              <el-table-column label="职业" #default="scope">
                        <span v-if="scope.row.occupationId==1">
                            国家机关和事业单位负责人
                        </span>
                        <span v-if="scope.row.occupationId==2">
                            专业技术人员
                        </span>
                        <span v-if="scope.row.occupationId==3">
                            职员
                        </span>
                        <span v-if="scope.row.occupationId==4">
                            商人
                        </span>
                        <span v-if="scope.row.occupationId==5">
                            农民
                        </span>
                        <span v-if="scope.row.occupationId==6">
                            工人
                        </span>
                        <span v-if="scope.row.occupationId==7">
                            服务性工作人员
                        </span>
                        <span v-if="scope.row.occupationId==8">
                            家务
                        </span>
                        <span v-if="scope.row.occupationId==9">
                            其他
                        </span>
                    </el-table-column>
              <el-table-column prop="tag" label="标签" width="80"  />
              <el-table-column prop="physician" label="医师" width="60"  />
              <el-table-column prop="url" label="管理等级"  #default="scope">
                <img :src="scope.row.url" width="100" />
            </el-table-column>
              <el-table-column prop="thmanager" label="健康管理师"  width="80" />
              <el-table-column prop="dataTime" label="建档日期" />
              <el-table-column prop="archivalSource" label="档案来源" width="150"/>
              <el-table-column label="操作" align="center" width="280" #default="scope">
                <el-button type="primary" size="small" @click="xiangqing(scope.row)">
                  查看详情
              </el-button>
              <el-button type="primary" size="small" @click="addShow(scope.row)">
                  修改
              </el-button>
              <el-button type="danger" size="small" @click="deleteById(scope.row)">
                  删除
              </el-button>
              </el-table-column>
          </el-table>
  
       <!--分页条-->
  <el-pagination
                 v-model:current-page="pageParams.page"
                 v-model:page-size="pageParams.limit"
                 :page-sizes="[2,5,10, 20, 50, 100]"
                 @size-change="fetchData"
                 @current-change="fetchData"
                 layout="total, sizes, prev, pager, next"
                 :total="total"
  />
  <!-- 查看详情 -->
  <el-dialog v-model="xiang" add-icon="Postcard" title="患者详情" width="80%">

        <el-tabs
            v-model="activeName"
            type="border-card"
            class="demo-tabs"
            @tab-click="handleClick"
            
        >
            <el-tab-pane label="基本详情" name="first">
                
                <el-table :data="user" class="el-table"
                style="margin-left: 50px"
                
                >
                    <el-table-column>
                    <!-- <template #header>
                        
                    </template> -->
                    <template #default="scope">
                        <h1 style="color: black">患者信息</h1>
                        姓名:
                        <span class="el-table-font">
                            {{ scope.row.name }}
                        </span>
                        身份证号:
                        <span class="el-table-font">
                            {{ scope.row.idNumber }}
                        </span>
                        手机号码:
                        <span class="el-table-font">
                            {{ scope.row.phone }}
                        </span>
                        头像:
                        <span class="el-table-font">
                            <img :src="scope.row.img" width="50" />
                        </span>
                        性别:
                        <span class="el-table-font">
                            {{ scope.row.sex==1?'男':'女' }}
                        </span><br><br>
                        身高:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        体重:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        BMI:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        出生日期:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        <br><br>
                        现居地:
                        <span class="el-table-font">
                            {{ scope.row.address }}
                        </span>
                        户籍地:
                        <span class="el-table-font">
                            {{ scope.row.address }}
                        </span>
                        职业:
                        <span class="el-table-font">
                        {{ scope.row.occupationId==1?'国家机关和事业单位负责人':'' }}
                        {{ scope.row.occupationId==2?'专业技术人员':'' }}
                        {{ scope.row.occupationId==3?'职员':'' }}
                        {{ scope.row.occupationId==4?'商人':'' }}
                        {{ scope.row.occupationId==5?'农民':'' }}
                        {{ scope.row.occupationId==6?'工人':'' }}
                        {{ scope.row.occupationId==7?'服务性工作人员':'' }}
                        {{ scope.row.occupationId==8?'家务':'' }}
                        {{ scope.row.occupationId==9?'其他':'' }}
                        </span><br><br>
                        血糖测量次数:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        绑定血糖仪:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        最近测量血糖:
                        <span class="el-table-font">
                            {{  }}
                        </span><br><br>
                        血压测量次数:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        绑定血压计:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        最近测量血压:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                    </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="健康档案" name="second">健康档案</el-tab-pane>
            <el-tab-pane label="处方管理" name="third">处方管理</el-tab-pane>
            <el-tab-pane label="健康干预" name="five">健康干预</el-tab-pane>
            <el-tab-pane label="健康随访" name="six">健康随访</el-tab-pane>
            <el-tab-pane label="健康评估" name="seven">健康评估</el-tab-pane>
            <el-tab-pane label="健康检测" name="eight">健康检测</el-tab-pane>
            <el-tab-pane label="健康报告" name="nine">健康报告</el-tab-pane>
        </el-tabs> 
  </el-dialog> 



    </div>
      </el-tab-pane>
      <el-tab-pane label="糖尿病" name="second">
        <div class="demo-date-picker">
          <!-- 搜索表单 -->
          <el-form label-width="auto" style="max-width: 100%">
              <el-row>
                  <el-col :span="5">
              <el-form-item label=" 姓名:">
                  <el-input
                    v-model="queryDto.name"
                    placeholder="姓名"
                  ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="8">
              <el-form-item label="身份证号:" style="margin-left: 20px;margin-right: 20px">
                      <el-input
                      v-model="queryDto.idNumber"
                    placeholder="身份证号"
                      ></el-input>
                  </el-form-item>
                  </el-col>
                  <el-col :span="10">
              <el-form-item label="建档时间:">
        <el-date-picker
          v-model="createTimes"
          type="daterange"
          unlink-panels
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
          :size="size"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
              </el-form-item>
                  </el-col>
              </el-row>
              
      <el-row style="display:flex">
          <el-button type="primary" size="small" @click="searchSysRole">
              搜索
          </el-button>
          <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
  </el-form>
          <!-- 添加按钮 -->
          <div class="tools-div">
              <el-button type="success" size="small" @click="addShow()">添 加</el-button>
          </div>
          <el-dialog v-model="dialogVisible" :title="tit" width="70%">
          <el-form label-width="120px">
              <el-row :gutter="40">
                  <el-col :span="6">
              <el-form-item label="姓名:">
                  <el-input v-model="patient.name"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="身份证号:">
                  <el-input  v-model="patient.idNumber"/>
              </el-form-item>
          </el-col>
              <el-col :span="6">
              <el-form-item label="联系方式:">
                  <el-input v-model="patient.phone"/>
              </el-form-item>
          </el-col>
              <el-col :span="6">
                  <el-form-item label="性别:">
                  <el-radio-group v-model="patient.sex">
                      <el-radio :label="1">男</el-radio>
                      <el-radio :label="2">女</el-radio>
                  </el-radio-group>
              </el-form-item>
          </el-col>
          </el-row>
          <el-row :gutter="20">
              <el-col :span="6">
                  <el-form-item label="年龄:">
                      <el-input v-model="patient.age"/>
                  </el-form-item>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="民族:">
                      <el-input v-model="patient.nationId"/>
                  </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="婚姻状况:">
                <el-select v-model="patient.maritalId" placeholder="婚姻状况">
                    <el-option
                        v-for="item in maritalIdList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="省:">
                <el-select v-model="sheng" @change="shengxuan" placeholder="省">
                    <el-option
                        v-for="item in optionsheng"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="市:">
                <el-select v-model="shi" label="市:" placeholder="市" @change="shixuan" v-bind:disabled="shid">
                    <el-option
                        v-for="item in optionshi"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="县:">
                <el-select v-model="xian" label="县:" @change="xianxuan" placeholder="县" v-bind:disabled="xiand">
                    <el-option
                        v-for="item in optionxian"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="文化程度:">
                      <el-input  v-model="patient.standardId"/>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row :gutter="20">
              <el-col :span="6">
                  <el-form-item label="职业:">
                      <el-input  v-model="patient.occupationId"/>
                  </el-form-item>
              </el-col>
              <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
              <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
              <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
          </el-row>
          <el-form-item label="家庭地址:">
                  <el-input v-model="patient.address"/>
              </el-form-item>
              <el-form-item label="标签:">
                  <el-input  v-model="patient.tag"/>
              </el-form-item>
              <el-form-item label="头像">
                <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8501/sys/patient/fileUpload"
                            :show-file-list="show"
                            :on-success="handleAvatarSuccess"
                            :headers="headers"
                    >
                    <img v-if="patient.img" :src="patient.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
              <el-form-item label="医师:">
                  <el-input  v-model="patient.physician"/>
              </el-form-item>
              <el-form-item label="健康管理师:">
                  <el-input  v-model="patient.thmanager"/>
              </el-form-item>
              <el-form-item label="档案来源:">
                  <el-input  v-model="patient.archivalSource"/>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="addpatient()">提交</el-button>
                  <el-button @click="dialogVisible = false">取消</el-button>
              </el-form-item>
          </el-form>
      </el-dialog> 
          
          <!--- 角色表格数据 -->
          <el-table :data="list" style="width: 100%" >
            <el-table-column prop="id" label="序号" width="60" />
            <!-- <el-table-column type="index" label="序号" width="100"></el-table-column> -->
              <el-table-column prop="name" label="姓名" width="60" />
              
              <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
                  {{ scope.row.sex == 1 ? '男' : '女' }}
              </el-table-column>
              <el-table-column prop="img" label="头像"  #default="scope">
                <img :src="scope.row.img" width="50" />
            </el-table-column>
              <el-table-column prop="phone" label="联系方式"/>
              <el-table-column prop="address" label="家庭地址" />
              <el-table-column prop="idNumber" label="身份证号" />
              <el-table-column label="职业" #default="scope">
                        <span v-if="scope.row.occupationId==1">
                            国家机关和事业单位负责人
                        </span>
                        <span v-if="scope.row.occupationId==2">
                            专业技术人员
                        </span>
                        <span v-if="scope.row.occupationId==3">
                            职员
                        </span>
                        <span v-if="scope.row.occupationId==4">
                            商人
                        </span>
                        <span v-if="scope.row.occupationId==5">
                            农民
                        </span>
                        <span v-if="scope.row.occupationId==6">
                            工人
                        </span>
                        <span v-if="scope.row.occupationId==7">
                            服务性工作人员
                        </span>
                        <span v-if="scope.row.occupationId==8">
                            家务
                        </span>
                        <span v-if="scope.row.occupationId==9">
                            其他
                        </span>
                    </el-table-column>
              <el-table-column prop="tag" label="标签" width="80"  />
              <el-table-column prop="physician" label="医师" width="60"  />
              <el-table-column prop="url" label="管理等级"  #default="scope">
                <img :src="scope.row.url" width="100" />
            </el-table-column>
              <el-table-column prop="thmanager" label="健康管理师"  width="80" />
              <el-table-column prop="dataTime" label="建档日期" />
              <el-table-column prop="archivalSource" label="档案来源" width="150"/>
              <el-table-column label="操作" align="center" width="280" #default="scope">
                <el-button type="primary" size="small" @click="xiangqing(scope.row)">
                  查看详情
              </el-button>
              <el-button type="primary" size="small" @click="addShow(scope.row)">
                  修改
              </el-button>
              <el-button type="danger" size="small" @click="deleteById(scope.row)">
                  删除
              </el-button>
              </el-table-column>
          </el-table>
  
       <!--分页条-->
  <el-pagination
                 v-model:current-page="pageParams.page"
                 v-model:page-size="pageParams.limit"
                 :page-sizes="[2,5,10, 20, 50, 100]"
                 @size-change="fetchData"
                 @current-change="fetchData"
                 layout="total, sizes, prev, pager, next"
                 :total="total"
  />
  <!-- 查看详情 -->
  <el-dialog v-model="xiang" add-icon="Postcard" title="患者详情" width="80%">

        <el-tabs
            v-model="activeName"
            type="border-card"
            class="demo-tabs"
            @tab-click="handleClick"
            
        >
            <el-tab-pane label="基本详情" name="first">
                
                <el-table :data="user" class="el-table"
                style="margin-left: 50px"
                
                >
                    <el-table-column>
                    <!-- <template #header>
                        
                    </template> -->
                    <template #default="scope">
                        <h1 style="color: black">患者信息</h1>
                        姓名:
                        <span class="el-table-font">
                            {{ scope.row.name }}
                        </span>
                        身份证号:
                        <span class="el-table-font">
                            {{ scope.row.idNumber }}
                        </span>
                        手机号码:
                        <span class="el-table-font">
                            {{ scope.row.phone }}
                        </span>
                        头像:
                        <span class="el-table-font">
                            <img :src="scope.row.img" width="50" />
                        </span>
                        性别:
                        <span class="el-table-font">
                            {{ scope.row.sex==1?'男':'女' }}
                        </span><br><br>
                        身高:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        体重:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        BMI:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        出生日期:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        <br><br>
                        现居地:
                        <span class="el-table-font">
                            {{ scope.row.address }}
                        </span>
                        户籍地:
                        <span class="el-table-font">
                            {{ scope.row.address }}
                        </span>
                        职业:
                        <span class="el-table-font">
                        {{ scope.row.occupationId==1?'国家机关和事业单位负责人':'' }}
                        {{ scope.row.occupationId==2?'专业技术人员':'' }}
                        {{ scope.row.occupationId==3?'职员':'' }}
                        {{ scope.row.occupationId==4?'商人':'' }}
                        {{ scope.row.occupationId==5?'农民':'' }}
                        {{ scope.row.occupationId==6?'工人':'' }}
                        {{ scope.row.occupationId==7?'服务性工作人员':'' }}
                        {{ scope.row.occupationId==8?'家务':'' }}
                        {{ scope.row.occupationId==9?'其他':'' }}
                        </span><br><br>
                        血糖测量次数:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        绑定血糖仪:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        最近测量血糖:
                        <span class="el-table-font">
                            {{  }}
                        </span><br><br>
                        血压测量次数:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        绑定血压计:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        最近测量血压:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                    </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="健康档案" name="second">健康档案</el-tab-pane>
            <el-tab-pane label="处方管理" name="third">处方管理</el-tab-pane>
            <el-tab-pane label="健康干预" name="five">健康干预</el-tab-pane>
            <el-tab-pane label="健康随访" name="six">健康随访</el-tab-pane>
            <el-tab-pane label="健康评估" name="seven">健康评估</el-tab-pane>
            <el-tab-pane label="健康检测" name="eight">健康检测</el-tab-pane>
            <el-tab-pane label="健康报告" name="nine">健康报告</el-tab-pane>
        </el-tabs> 
  </el-dialog> 



    </div>
      </el-tab-pane>
      <el-tab-pane label="心冠病" name="third">
        <div class="demo-date-picker">
          <!-- 搜索表单 -->
          <el-form label-width="auto" style="max-width: 100%">
              <el-row>
                  <el-col :span="5">
              <el-form-item label=" 姓名:">
                  <el-input
                    v-model="queryDto.name"
                    placeholder="姓名"
                  ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="8">
              <el-form-item label="身份证号:" style="margin-left: 20px;margin-right: 20px">
                      <el-input
                      v-model="queryDto.idNumber"
                    placeholder="身份证号"
                      ></el-input>
                  </el-form-item>
                  </el-col>
                  <el-col :span="10">
              <el-form-item label="建档时间:">
        <el-date-picker
          v-model="createTimes"
          type="daterange"
          unlink-panels
          range-separator="To"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :shortcuts="shortcuts"
          :size="size"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
              </el-form-item>
                  </el-col>
              </el-row>
              
      <el-row style="display:flex">
          <el-button type="primary" size="small" @click="searchSysRole">
              搜索
          </el-button>
          <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
  </el-form>
          <!-- 添加按钮 -->
          <div class="tools-div">
              <el-button type="success" size="small" @click="addShow()">添 加</el-button>
          </div>
          <el-dialog v-model="dialogVisible" :title="tit" width="70%">
          <el-form label-width="120px">
              <el-row :gutter="40">
                  <el-col :span="6">
              <el-form-item label="姓名:">
                  <el-input v-model="patient.name"/>
              </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="身份证号:">
                  <el-input  v-model="patient.idNumber"/>
              </el-form-item>
          </el-col>
              <el-col :span="6">
              <el-form-item label="联系方式:">
                  <el-input v-model="patient.phone"/>
              </el-form-item>
          </el-col>
              <el-col :span="6">
                  <el-form-item label="性别:">
                  <el-radio-group v-model="patient.sex">
                      <el-radio :label="1">男</el-radio>
                      <el-radio :label="2">女</el-radio>
                  </el-radio-group>
              </el-form-item>
          </el-col>
          </el-row>
          <el-row :gutter="20">
              <el-col :span="6">
                  <el-form-item label="年龄:">
                      <el-input v-model="patient.age"/>
                  </el-form-item>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="民族:">
                      <el-input v-model="patient.nationId"/>
                  </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item label="婚姻状况:">
                <el-select v-model="patient.maritalId" placeholder="婚姻状况">
                    <el-option
                        v-for="item in maritalIdList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="省:">
                <el-select v-model="sheng" @change="shengxuan" placeholder="省">
                    <el-option
                        v-for="item in optionsheng"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="市:">
                <el-select v-model="shi" label="市:" placeholder="市" @change="shixuan" v-bind:disabled="shid">
                    <el-option
                        v-for="item in optionshi"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="县:">
                <el-select v-model="xian" label="县:" @change="xianxuan" placeholder="县" v-bind:disabled="xiand">
                    <el-option
                        v-for="item in optionxian"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                  <el-form-item label="文化程度:">
                      <el-input  v-model="patient.standardId"/>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-row :gutter="20">
              <el-col :span="6">
                  <el-form-item label="职业:">
                      <el-input  v-model="patient.occupationId"/>
                  </el-form-item>
              </el-col>
              <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
              <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
              <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
          </el-row>
          <el-form-item label="家庭地址:">
                  <el-input v-model="patient.address"/>
              </el-form-item>
              <el-form-item label="标签:">
                  <el-input  v-model="patient.tag"/>
              </el-form-item>
              <el-form-item label="头像">
                <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8501/sys/patient/fileUpload"
                            :show-file-list="show"
                            :on-success="handleAvatarSuccess"
                            :headers="headers"
                    >
                    <img v-if="patient.img" :src="patient.img" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
              <el-form-item label="医师:">
                  <el-input  v-model="patient.physician"/>
              </el-form-item>
              <el-form-item label="健康管理师:">
                  <el-input  v-model="patient.thmanager"/>
              </el-form-item>
              <el-form-item label="档案来源:">
                  <el-input  v-model="patient.archivalSource"/>
              </el-form-item>
              <el-form-item>
                  <el-button type="primary" @click="addpatient()">提交</el-button>
                  <el-button @click="dialogVisible = false">取消</el-button>
              </el-form-item>
          </el-form>
      </el-dialog> 
          
          <!--- 角色表格数据 -->
          <el-table :data="list" style="width: 100%" >
            <el-table-column prop="id" label="序号" width="60" />
            <!-- <el-table-column type="index" label="序号" width="100"></el-table-column> -->
              <el-table-column prop="name" label="姓名" width="60" />
              
              <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
                  {{ scope.row.sex == 1 ? '男' : '女' }}
              </el-table-column>
              <el-table-column prop="img" label="头像"  #default="scope">
                <img :src="scope.row.img" width="50" />
            </el-table-column>
              <el-table-column prop="phone" label="联系方式"/>
              <el-table-column prop="address" label="家庭地址" />
              <el-table-column prop="idNumber" label="身份证号" />
              <el-table-column label="职业" #default="scope">
                        <span v-if="scope.row.occupationId==1">
                            国家机关和事业单位负责人
                        </span>
                        <span v-if="scope.row.occupationId==2">
                            专业技术人员
                        </span>
                        <span v-if="scope.row.occupationId==3">
                            职员
                        </span>
                        <span v-if="scope.row.occupationId==4">
                            商人
                        </span>
                        <span v-if="scope.row.occupationId==5">
                            农民
                        </span>
                        <span v-if="scope.row.occupationId==6">
                            工人
                        </span>
                        <span v-if="scope.row.occupationId==7">
                            服务性工作人员
                        </span>
                        <span v-if="scope.row.occupationId==8">
                            家务
                        </span>
                        <span v-if="scope.row.occupationId==9">
                            其他
                        </span>
                    </el-table-column>
              <el-table-column prop="tag" label="标签" width="80"  />
              <el-table-column prop="physician" label="医师" width="60"  />
              <el-table-column prop="url" label="管理等级"  #default="scope">
                <img :src="scope.row.url" width="100" />
            </el-table-column>
              <el-table-column prop="thmanager" label="健康管理师"  width="80" />
              <el-table-column prop="dataTime" label="建档日期" />
              <el-table-column prop="archivalSource" label="档案来源" width="150"/>
              <el-table-column label="操作" align="center" width="280" #default="scope">
                <el-button type="primary" size="small" @click="xiangqing(scope.row)">
                  查看详情
              </el-button>
              <el-button type="primary" size="small" @click="addShow(scope.row)">
                  修改
              </el-button>
              <el-button type="danger" size="small" @click="deleteById(scope.row)">
                  删除
              </el-button>
              </el-table-column>
          </el-table>
  
       <!--分页条-->
  <el-pagination
                 v-model:current-page="pageParams.page"
                 v-model:page-size="pageParams.limit"
                 :page-sizes="[2,5,10, 20, 50, 100]"
                 @size-change="fetchData"
                 @current-change="fetchData"
                 layout="total, sizes, prev, pager, next"
                 :total="total"
  />
  <!-- 查看详情 -->
  <el-dialog v-model="xiang" add-icon="Postcard" title="患者详情" width="80%">

        <el-tabs
            v-model="activeName"
            type="border-card"
            class="demo-tabs"
            @tab-click="handleClick"
            
        >
            <el-tab-pane label="基本详情" name="first">
                
                <el-table :data="user" class="el-table"
                style="margin-left: 50px"
                
                >
                    <el-table-column>
                    <!-- <template #header>
                        
                    </template> -->
                    <template #default="scope">
                        <h1 style="color: black">患者信息</h1>
                        姓名:
                        <span class="el-table-font">
                            {{ scope.row.name }}
                        </span>
                        身份证号:
                        <span class="el-table-font">
                            {{ scope.row.idNumber }}
                        </span>
                        手机号码:
                        <span class="el-table-font">
                            {{ scope.row.phone }}
                        </span>
                        头像:
                        <span class="el-table-font">
                            <img :src="scope.row.img" width="50" />
                        </span>
                        性别:
                        <span class="el-table-font">
                            {{ scope.row.sex==1?'男':'女' }}
                        </span><br><br>
                        身高:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        体重:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        BMI:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        出生日期:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        <br><br>
                        现居地:
                        <span class="el-table-font">
                            {{ scope.row.address }}
                        </span>
                        户籍地:
                        <span class="el-table-font">
                            {{ scope.row.address }}
                        </span>
                        职业:
                        <span class="el-table-font">
                        {{ scope.row.occupationId==1?'国家机关和事业单位负责人':'' }}
                        {{ scope.row.occupationId==2?'专业技术人员':'' }}
                        {{ scope.row.occupationId==3?'职员':'' }}
                        {{ scope.row.occupationId==4?'商人':'' }}
                        {{ scope.row.occupationId==5?'农民':'' }}
                        {{ scope.row.occupationId==6?'工人':'' }}
                        {{ scope.row.occupationId==7?'服务性工作人员':'' }}
                        {{ scope.row.occupationId==8?'家务':'' }}
                        {{ scope.row.occupationId==9?'其他':'' }}
                        </span><br><br>
                        血糖测量次数:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        绑定血糖仪:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        最近测量血糖:
                        <span class="el-table-font">
                            {{  }}
                        </span><br><br>
                        血压测量次数:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        绑定血压计:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                        最近测量血压:
                        <span class="el-table-font">
                            {{  }}
                        </span>
                    </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="健康档案" name="second">健康档案</el-tab-pane>
            <el-tab-pane label="处方管理" name="third">处方管理</el-tab-pane>
            <el-tab-pane label="健康干预" name="five">健康干预</el-tab-pane>
            <el-tab-pane label="健康随访" name="six">健康随访</el-tab-pane>
            <el-tab-pane label="健康评估" name="seven">健康评估</el-tab-pane>
            <el-tab-pane label="健康检测" name="eight">健康检测</el-tab-pane>
            <el-tab-pane label="健康报告" name="nine">健康报告</el-tab-pane>
        </el-tabs> 
  </el-dialog> 



    </div>
      </el-tab-pane>
    </el-tabs>
  </template>
  
  <script lang="ts" setup>
  import { ref,onMounted,computed } from 'vue';
  import { useApp } from '@/pinia/modules/app'
  import type { ElMessage, ElMessageBox,TabsPaneContext } from 'element-plus'
  import {GetSysRoleListByPage2tang,add,update,deletes,shengshixian,shiq,xianq,findname,maritalIdLists,findbyId} from '@/api/zsg/patient';

  const headers = {
  token: useApp().authorization.token     // 从pinia中获取token，在进行文件上传的时候将token设置到请求头中
}
// 图像上传成功以后的事件处理函数
const handleAvatarSuccess = (response,uploadFile) => {
    patient.value.img = response.data
}
const activeName = ref('first')
const user=ref([])
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const optionsheng=ref({})
const optionshi=ref({})
const optionxian=ref({})
const sheng=ref()
const shi=ref()
const xian=ref()
const shid=ref(true)
const xiand=ref(true)
const maritalIdList=ref({})
const createTimes=ref({})
  // 分页条总记录数
  let total = ref(0)
  
  // 定义表格数据模型
  let list = ref([
  ])
  let tit=ref("")
  const dialogVisible=ref(false)
const xiang=ref(false)
const shengshixian1=async()=>{
    const {data , code , message } = await shengshixian();
    optionsheng.value=data
    
}
const shengxuan=async()=>{
    console.log(shid.value)
    shid.value=false
    const {data , code , message } = await shiq(sheng.value)
    optionshi.value=data
    shengname()
}

const shengname=async()=>{
    const {data,code , message} =await findname(sheng.value)
    console.log(data)
    patient.value.address=data.name
}
const shiname=async()=>{
    const {data,code , message} =await findname(shi.value)
    console.log(data)
    patient.value.address+=data.name
}
const xianname=async()=>{
    const {data,code , message} =await findname(xian.value)
    console.log(data)
    patient.value.address+=data.name
}
const shixuan=async()=>{
    xiand.value=false
    const {data , code , message } = await xianq(shi.value)
    optionxian.value=data
    shiname();
}

const xianxuan=async()=>{
    xianname()
}
  const pageParamsForm={
      page:1,
      limit:2,
  }
  const pageParams = ref(pageParamsForm)     // 将pageParamsForm包装成支持响应式的对象
  // 搜索表单数据
  const queryDto = ref({
    name:"",
    idNumber:"",
  })
  // 页面加载完毕以后请求后端接口获取数据
  onMounted(() => {
      fetchData() ;
      shengshixian1();
      maritalIdLi();
  })
// 搜索按钮点击事件处理函数
const searchSysRole = () => {
    //queryDto.value.roleName = ""
    let initialtime=createTimes.value[0];
    let endtime=createTimes.value[1];
    queryDto.value.initialtime=initialtime;
    queryDto.value.endtime=endtime;
    console.log(queryDto.value)
    fetchData() ;
}
const maritalIdLi=async()=>{
    const {data , code , message } = await maritalIdLists();
    maritalIdList.value=data
}
  // 远程调用后端分页查询接口
  const fetchData = async () => {
      const {data , code , message } = await GetSysRoleListByPage2tang(pageParams.value.page , pageParams.value.limit , queryDto.value) ;
      console.log(data.list)
      list.value = data.list ;
      total.value = data.total
      // for(let a=0;a<=data.list.length;a++){
      //     if(data.list[a].sex=='1'){
      //         list.value[a].sex='男'
      //     }else{
      //         list.value[a].sex='女'
      //     }
          
      // }
  }
  const resetData=()=>{
      queryDto.value={}
      createTimes.value={}
  }
  // 定义提交表单数据模型
  const defaultForm = {
      name: "" ,
      sex:"",
      phone: "" ,
      address:"",
      idNumber:"",
      tag:"",
      physician:"",
      thmanager:"",
      archivalSource:"",
      occupationId:"",
      maritalId:"",
      img:"",
      risk:"",
  }
  const patient = ref(defaultForm)
  const addShow=(row)=>{
    if(row!=""){
        tit.value="修改个人信息"
        dialogVisible.value = true
        patient.value ={...row}
    }
    tit.value="添加个人信息"
    dialogVisible.value=true;
  
  }
  const addpatient=async()=>{
    console.log(patient.value.id)
    if(patient.value.id==null||patient.value.id==''){
    const {code , message , data} = await add(patient.value)
    if(code === 200) {
        dialogVisible.value = false
        ElMessage.success('操作成功')
        fetchData()
    }else {
        ElMessage.error(message)
    }
}else{
    console.log(patient.value.img)
    const {code , message , data} =  await update(patient.value)
    if(code === 200) {
        dialogVisible.value = false
        ElMessage.success('操作成功')
        fetchData()
    }else {
        ElMessage.error(message)
    }
}
  }
  const deleteById = (row) => {
    ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', 'Warning', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
       const {code } = await deletes(row)
       if(code === 200) {
            ElMessage.success('删除成功')
            fetchData()
       }
    })
}
const xiangqing=async(row)=>{
    console.log(user.value)
   const{data,message,code} = await findbyId(row);
//    console.log(data)
   user.value=data
   console.log(user.value)
   xiang.value=true
}
  </script>
  
  
  <style>
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  .search-div {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    background-color: #fff;
  }
  
  .tools-div {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ebeef5;
    border-radius: 3px;
    background-color: #fff;
  }
  
  
  .el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.demo-tabs > .el-tabs__content {
  padding: 10;
  color: black;
  font-weight: 600;
}
/* .el-table {
  border-top: 1px solid black;
} */
.el-table-font{
    padding-right: 130px;
    color: black;
    margin-right: 50px;
    font-size: 20px;
}
  </style>
  